<!-- @format -->

<template>
  <!-- 底部区域 -->
  <footer class="footer">
    <span class="todo-count"
      ><strong>{{ undoneTodoLength }}</strong> item left</span
    >
    <ul class="filters">
      <li>
        <a
          class="selected"
          href="#/"
          >All</a
        >
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button
      class="clear-completed"
      @click="$emit('clear-todo')">
      Clear completed
    </button>
  </footer>
</template>

<script>
  export default {
    props: ['arr'],
    computed: {
      undoneTodoLength() {
        return this.arr.filter(({ done }) => !done).length
      }
    }
  }
</script>

<style></style>
